console.log('[index.js] 加载');

import React from 'react';
import ReactDOM from 'react-dom';
import { createStore, applyMiddleware } from 'redux';
import { Provider } from 'react-redux';
import thunk from 'redux-thunk';

console.log('[index.js] =>import '+ `import counter from './reducers'`)
import counter from './reducers';

console.log('[index.js] =>import containers/Connect1-5')
import Connect1 from './containers/Connect1';
import Connect2 from './containers/Connect2';
import Connect3 from './containers/Connect3';
import Connect4 from './containers/Connect4';
import Connect5 from './containers/Connect5';

//创建 store
console.log('[index.js] =>createStore');
const store = createStore(counter, applyMiddleware(thunk));
const rootEl = document.getElementById('root');

console.log('[index.js] =>ReactDOM.render');
ReactDOM.render(
    <Provider store={store}>
        <div>
            <h2>使用react-redux连接</h2>
            <ul>
                <li>
                    connect()的前两个参数分别为函数和对象：
                    <Connect1 />
                </li>
                <li>
                    connect()的前两个参数均为函数：
                    <Connect2 />
                </li>
                <li>
                    connect()的前两个参数均为函数，但使用了bindActionCreators：
                    <Connect3 />
                </li>
                <li>
                    connect()的第二个参数为空：
                    <Connect4 />
                </li>
                <li>
                    connect()的装饰器写法：
                    <Connect5 />
                </li>
            </ul>
        </div>
    </Provider>, rootEl);





// 总结:
// 1. Redux通常只与靠近顶层的组件进行连接，这些组件再将state和action创建函数通过props传给里面的组件。
// 2. 我们将与Redux连接的组件称为容器组件（container components），将里面的组件称为展示组件（presentational components）。
// 3. Provider组件负责给程序提供store，而connect()则负责生成新的名为Connect的组件， Connect组件在context中拿到store后，从store中获取state和dispatch，最后将state和经过dispatch加工的action创建函数连接到组件上。
// 4. 我们都应该将Redux连接在组件顶层，不要让里面的组件感受到Redux的存在。
